<!--
 * @Author: wupeiwen <javapeiwen2010@gmail.com>
 * @Date: 2022-05-24 14:05:48
 * @LastEditors: wupeiwen <javapeiwen2010@gmail.com>
 * @LastEditTime: 2022-05-25 11:18:55
 * @FilePath: \tea-garden-web\src\components\component-map-button-group.vue
 * @Description: 地图-按钮组
-->
<template>
  <div class="map-button-group">
    <section
      class="layers-button"
      :style="{
        'background-image': buttonActive.layers
          ? 'url(/image/base-overview/icon-button-01-active.png)'
          : 'url(/image/base-overview/icon-button-01-normal.png)',
      }"
      @click="clickButton('layers')"
    >
      <div class="dialog" v-if="buttonActive.layers">
        <div class="content" @click.stop="test">
          <section class="item">
            <span class="item-label">设备图层</span>
            <el-switch
              v-model="layersEquipment"
              size="default"
              active-color="#089BAB"
              inline-prompt
              active-text="开"
              inactive-text="关"
            />
          </section>
          <section class="item">
            <span class="item-label">地块图层</span>
            <el-switch
              v-model="layersFarmland"
              size="default"
              active-color="#089BAB"
              inline-prompt
              active-text="开"
              inactive-text="关"
            />
          </section>
          <section class="item">
            <span class="item-label">遥感图层</span>
            <el-switch
              v-model="layersSatellite"
              size="default"
              active-color="#089BAB"
              inline-prompt
              active-text="开"
              inactive-text="关"
              disabled
            />
          </section>
        </div>
      </div>
    </section>
    <section
      class="legends-button"
      :style="{
        'background-image': buttonActive.legends
          ? 'url(/image/base-overview/icon-button-02-active.png)'
          : 'url(/image/base-overview/icon-button-02-normal.png)',
      }"
      @click="clickButton('legends')"
    >
      <div class="dialog" v-if="buttonActive.legends">
        <div class="content">
          <!-- <section class="item">
            <span class="item-label">专题图例</span>
            <el-switch
              v-model="legendsSubject"
              size="default"
              active-color="#089BAB"
              inline-prompt
              active-text="开"
              inactive-text="关"
            />
          </section> -->
          <section class="item">
            <span class="item-label">设备图例</span>
            <el-switch
              v-model="legendsEquipment"
              size="default"
              active-color="#089BAB"
              inline-prompt
              active-text="开"
              inactive-text="关"
            />
          </section>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  data () {
    return {
      buttonActive: { layers: false, legends: false }
    }
  },
  computed: {
    ...mapState('base-overview', ['layers', 'legends']),
    layersEquipment: {
      get () {
        return this.layers.equipment
      },
      set (value) {
        this.setLayersOrLegends({ obj: 'layers', key: 'equipment', value })
      }
    },
    layersFarmland: {
      get () {
        return this.layers.farmland
      },
      set (value) {
        this.setLayersOrLegends({ obj: 'layers', key: 'farmland', value })
      }
    },
    layersSatellite: {
      get () {
        return this.layers.satellite
      },
      set (value) {
        this.setLayersOrLegends({ obj: 'layers', key: 'satellite', value })
      }
    },
    legendsSubject: {
      get () {
        return this.legends.subject
      },
      set (value) {
        this.setLayersOrLegends({ obj: 'legends', key: 'subject', value })
      }
    },
    legendsEquipment: {
      get () {
        return this.legends.equipment
      },
      set (value) {
        this.setLayersOrLegends({ obj: 'legends', key: 'equipment', value })
      }
    }
  },
  methods: {
    clickButton (type) {
      if (type === 'layers') {
        this.buttonActive.layers = !this.buttonActive.layers
        this.buttonActive.legends = false
      }
      if (type === 'legends') {
        this.buttonActive.legends = !this.buttonActive.legends
        this.buttonActive.layers = false
      }
    },
    ...mapMutations('base-overview', ['setLayersOrLegends'])
  }
}
</script>

<style lang='scss'>
@mixin button {
  width: 49px;
  height: 49px;
  background-size: cover;
  .dialog {
    position: relative;
    height: 100%;
    .content {
      position: absolute;
      width: 150px;
      right: 60px;
      bottom: 14px;
      background: #e8e8e8;
      border-radius: 6px;
      padding: 8px;
      &::after {
        display: block;
        content: "";
        border-width: 6px;
        border-style: solid;
        border-color: transparent transparent transparent #e8e8e8;
        position: absolute;
        right: -11px;
        bottom: 6px;
      }
      .item{
        .item-label {
          display: inline-block;
          color: #089BAB;
          font-size: 14px;
          height: 32px;
          line-height: 32px;
          margin-right: 14px;
        }
      }
    }
  }
}
.layers-button {
  @include button;
  margin-bottom: 9.5px;
}
.legends-button {
  @include button;
}
</style>
